<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-row gap="10px">
                <pure-col span="33.33"><view class="col-content"></view></pure-col>
                <pure-col span="33.33"><view class="col-content"></view></pure-col>
                <pure-col span="33.33"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="50"><view class="col-content"></view></pure-col>
                <pure-col span="50"><view class="col-content"></view></pure-col>
                <pure-col span="100"><view class="col-content"></view></pure-col>
            </pure-row>
        </a-demo>

        <a-demo title="偏移量">
            <pure-row gap="10px">
                <pure-col span="33.33" offset="33.33"><view class="col-content"></view></pure-col>
                <pure-col span="33.33"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25" offset="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="50" offset="10"><view class="col-content"></view></pure-col>
            </pure-row>
        </a-demo>

        <a-demo title="对齐方式" desc="对应 flex 布局的 justify-content 属性">
            <pure-row gap="10px">
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
            </pure-row>
            <pure-row gap="10px" justify="flex-end">
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
            </pure-row>
            <pure-row gap="10px" justify="space-between">
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
                <pure-col span="25"><view class="col-content"></view></pure-col>
            </pure-row>
        </a-demo>
    </view>
</template>

<script setup></script>

<style scoped>
    .col-content {
        height: 30px;
        background: #99a9bf;
        border-radius: 5px;
    }
</style>
